<template>
  <div class="admin">
    <div class="admin-title">{{ t("competitionRecord.title") }}</div>

    <!-- 筛选区：使用 actions 表单项作为按钮 -->
    <CommonForm
      v-model="query"
      :config="formConfig"
      :show-buttons="false"
      :gutter="12"
      label-width="90px"
      actions-align="left"
      @submit="onSearch"
      @reset="onReset"
      class="mb-20"
    />

    <!-- 列表 -->
    <CommonTable
      :table-data="tableData"
      :table-config="tableConfig"
      :table-loading="loading"
      :is-show-index="false"
    >
      <!-- 三列用 v-html 以支持 <br/> 换行 -->
      <template #company="{ row }">
        <div v-html="row.company"></div>
      </template>
      <template #joinDesc="{ row }">
        <div v-html="row.joinDesc"></div>
      </template>
      <template #resultDesc="{ row }">
        <div v-html="row.resultDesc"></div>
      </template>
    </CommonTable>

    <!-- 分页 -->
    <Pagination
      :background="true"
      :total="total"
      :current-page.sync="pageNum"
      :page-size.sync="pageSize"
      @pagination-change="handlePaginationChange"
      class="pagination"
    />
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();

definePageMeta({
  title: "参赛记录",
  en_title: "Competition Record",
  zh_hk_title: "參賽記錄",
  ssr: true,
  isTokenCheck: true,
});

// 查询条件
const query = ref({
  dateRange: [], // [start, end]
  eventName: "",
  location: "",
  matchType: "", // international | domestic | training
});

const matchTypeOptions = computed(() => [
  { label: t("competitionRecord.filter.typeOptions.international"), value: "international" },
  { label: t("competitionRecord.filter.typeOptions.domestic"), value: "domestic" },
  { label: t("competitionRecord.filter.typeOptions.training"), value: "training" },
]);

// 表单配置（末尾是 actions 按钮项；其 labelWidth=0，不占标签宽度）
const formConfig = computed(() => [
  {
    type: "date",
    prop: "dateRange",
    label: t("competitionRecord.filter.dateRange"),
    dateType: "daterange",
    valueFormat: "YYYY-MM-DD",
    rangeSeparator: "-",
    startPlaceholder: t("competitionRecord.filter.startPlaceholder"),
    endPlaceholder: t("competitionRecord.filter.endPlaceholder"),
    span: 6,
    clearable: true,
  },
  {
    type: "input",
    prop: "eventName",
    label: t("competitionRecord.filter.eventName"),
    placeholder: t("competitionRecord.filter.eventNamePlaceholder"),
    clearable: true,
    span: 6,
  },
  {
    type: "input",
    prop: "location",
    label: t("competitionRecord.filter.location"),
    placeholder: t("competitionRecord.filter.locationPlaceholder"),
    clearable: true,
    span: 6,
  },
  {
    type: "select",
    prop: "matchType",
    label: t("competitionRecord.filter.matchType"),
    placeholder: t("competitionRecord.filter.matchTypePlaceholder"),
    clearable: true,
    options: matchTypeOptions.value,
    span: 6,
  },
  // 按钮项：作为一个 el-form-item，labelWidth=0；通过栅格控制在第1/第2行
  {
    type: "actions",
    // label: "",         // 可省略
    labelWidth: 0, // 显式为 0；组件里也会强制 0
    span: 6, // 宽屏占 6，通常可与筛选同一行
    md: 8,
    sm: 12,
    xs: 24, // 窄屏占满 -> 自动换到下一行
    align: "left", // left | center | right
    showSubmit: true,
    showReset: true,
    submitText: t("competitionRecord.filter.submit"),
    resetText: t("competitionRecord.filter.reset"),
  },
]);

// 表格列（给三列配置 slotName 以便 v-html 渲染）
const tableConfig = computed(() => [
  { prop: "attendTime", label: t("competitionRecord.table.attendTime"), minWidth: "120" },
  { prop: "eventName", label: t("competitionRecord.table.eventName"), minWidth: "160" },
  { prop: "location", label: t("competitionRecord.table.location"), minWidth: "120" },
  { prop: "typeText", label: t("competitionRecord.table.typeText"), minWidth: "100" },
  {
    prop: "company",
    label: t("competitionRecord.table.company"),
    minWidth: "160",
    slotName: "company",
  },
  {
    prop: "joinDesc",
    label: t("competitionRecord.table.joinDesc"),
    minWidth: "220",
    slotName: "joinDesc",
  },
  {
    prop: "resultDesc",
    label: t("competitionRecord.table.resultDesc"),
    minWidth: "220",
    slotName: "resultDesc",
  },
  { prop: "score", label: t("competitionRecord.table.score"), minWidth: "100" },
]);

const loading = ref(false);
const tableData = ref([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(20);

const typeTextMap = computed(() => ({
  international: t("competitionRecord.filter.typeOptions.international"),
  domestic: t("competitionRecord.filter.typeOptions.domestic"),
  training: t("competitionRecord.filter.typeOptions.training"),
}));

// 仅按钮触发
const onSearch = () => {
  pageNum.value = 1;
  fetchList();
};
const onReset = () => {
  Object.assign(query.value, {
    dateRange: [],
    eventName: "",
    location: "",
    matchType: "",
  });
  pageNum.value = 1;
  fetchList();
};

const handlePaginationChange = ({ currentPage, pageSize: size }) => {
  pageNum.value = currentPage;
  pageSize.value = size;
  fetchList();
};

// 模拟请求（替换为真实接口后保留参数结构）
async function fetchList() {
  loading.value = true;

  // mock 数据
  const mockRow = (i) => {
    const type = i % 3 === 0 ? "international" : i % 3 === 1 ? "domestic" : "training";
    return {
      attendTime: t("competitionRecord.sample.attendTime", { year: "2025", month: "07" }),
      eventName: t("competitionRecord.sample.eventName"),
      location: t("competitionRecord.sample.location"),
      type,
      typeText: typeTextMap.value[type] || "",
      company: t("competitionRecord.sample.company"),
      joinDesc: t("competitionRecord.sample.joinDesc"),
      resultDesc: t("competitionRecord.sample.resultDesc"),
      score: t("competitionRecord.sample.score"),
    };
  };

  const start = (pageNum.value - 1) * pageSize.value;
  const list = Array.from({ length: pageSize.value }, (_, idx) =>
    mockRow(start + idx)
  );

  // 简单过滤（示意）
  const filtered = list.filter((row) => {
    const byName = query.value.eventName
      ? row.eventName.includes(query.value.eventName)
      : true;
    const byLoc = query.value.location
      ? row.location.includes(query.value.location)
      : true;
    const byType = query.value.matchType ? row.type === query.value.matchType : true;
    return byName && byLoc && byType;
  });

  total.value = 8;
  tableData.value = filtered;
  loading.value = false;
}

onMounted(fetchList);

watch(
  () => locale.value,
  () => {
    fetchList();
  }
);
</script>

<style scoped lang="less">
.mb-20 {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 16px;
}
</style>
